<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件参数检验与非props特性</title>
    <script src="vue.js"></script>
</head>
<body>
    <!--  props特性为父组件向子组件传递参数时，正好子组件定义了参数的接收，
        则可以在子组件中通过插值表达式接收参数
        并且父组件定义的属性不会在dom中显示
        非props特性为父组件向子组件传递参数时，
        正好子组件未定义参数的接收，则则组件不能通过插值表达式接收参数
        并且父组件定义的属性会在dom中显示-->
    <div id="app">
        <child content="Hello World..."></child>
    </div>
    <script>
        Vue.component("child", {
            //props : ['content'] ,
            props : {
              //content : String
              // content : [String, Number]
              content : {
                  type : String ,
                  required : true,
                  default : 'default value',
                  validator : function(value){
                    return (value.length > 10)
                  }
              }
            },
            template : "<div>{{content}}</div>"
        }) ;

        var vm = new Vue({
            el : "#app"
        })
    </script>
</body>
</html>